<template>
  <div>
    <!-- 查询条件输入 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form>
        <el-form-item label="负责人">
          <el-select
              v-model="sysUser.userId"
              placeholder="请选择负责人"
              @visible-change="fetchUsers"
          >
            <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.name"
                :value="user.id"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="8">
        <el-form>
        <el-form-item label="客户">
          <el-select
              v-model="Cid.customerName"
              placeholder="请选择客户"
              @visible-change="fetchCustomer"
          >
            <el-option
                v-for="customer in customers"
                :key="customer.id"
                :label="customer.name"
                :value="customer.name"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="8">
        <el-select v-model="searchStatus" placeholder="请选择">
          <el-option
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="8">
        <el-form>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        </el-form>
      </el-col>


    </el-row>






    <!-- 展示查询数据 -->
    <el-table :data="OrderList" style="width: 100%">
      <el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
      <el-table-column prop="orderDate" label="完成时间" width="180"></el-table-column>
      <el-table-column prop="shippingAddress" label="送货地点" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180"></el-table-column>
      <el-table-column prop="userName" label="负责人" width="180"></el-table-column>
      <el-table-column prop="createTime" label="订单创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button type="text" @click="handleDetail(scope.row)">查看详情</el-button>
          <el-button type="text" @click="handleDetail1(scope.row)">生成入库申请单</el-button>

          <!-- 添加下拉框 -->
          <el-select v-model="scope.row.newStatus" placeholder="请选择" @change="handleSelectChange(scope.row)">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情的对话框 -->
    <el-dialog title="商品详情" v-model="dialogVisible">
      <el-table :data="detailList">
        <el-table-column prop="brand" label="商品品牌"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="typeName" label="包装类型"></el-table-column>
        <el-table-column prop="weight" label="体积/重量"></el-table-column>
        <el-table-column prop="price" label="售价"></el-table-column>
        <el-table-column prop="total" label="数量"></el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="出库申请单" v-model="dialogVisible1">
     <el-form>
       <el-form-item label="出库日期">
         <el-date-picker
             v-model="time"
             type="date"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
         >
         </el-date-picker>

       </el-form-item>
       <span style="font-weight: bold">订单编号：{{OrderId}}</span>

     </el-form>

        <span class="dialog-footer">
              <el-divider />

          <el-button @click="dialogVisible1 = false">关闭</el-button>
          <el-button @click="addObdDelivery">生成</el-button>
        </span>
    </el-dialog>
  </div>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
  >
  </el-pagination>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {getUser} from "../../../api/sale/priceList";
import {getCustomer} from "../../../api/sale/customer";
import {selectOrder,toExamine,selectDetailedById} from "../../../api/sale/order";
import {addObd} from "../../../api/sale/obdDelivery";

const searchStatus=ref('')
const detailList = ref([]) // 报价单商品详情数据
const dialogVisible = ref(false) // 控制详情对话框的显示
const dialogVisible1 = ref(false) // 出库申请单对话框的显示
// const priceListVoLists=ref([])
const OrderList=ref([])
const time=ref('')
const OrderId=ref('无')

function handleSearch(){
  const params = {
    // ...inventoryVo.value, // 展开 inventoryVo.value 对象的所有属性
    userId:sysUser.value.userId,
    customerName:Cid.value.customerName,
    searchStatus:searchStatus.value,
    currentPage: page.value.currentPage, // 当前页码
    pageSize: page.value.pageSize // 每页条数
  };
  selectOrder(params).then(res=>{
    page.value.total=res.total
    OrderList.value=res.rows;
    OrderList.value.forEach(item=>{
      if(item.orderDate!=null){
        item.orderDate=formatDate(new Date(item.orderDate));
      }
      item.createTime=formatDate(new Date(item.createTime));
    })
  })

}
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
};

// 查看详情
const handleDetail = (row) => {
  selectDetailedById(row.orderId).then(res=>{
    detailList.value = [];
    res.saleOrderItems.forEach(item=>{
      detailList.value.push(item)
      dialogVisible.value = true
    })

  })





}
const handleDetail1 = (row) => {

  dialogVisible1.value = true
  OrderId.value=row.orderId;
}
const Cid=ref({
  customerName:''
})
const customers = ref([]);
const fetchCustomer =async (visible) =>{
  if(visible){
    getCustomer().then(res=>{
      customers.value = res.customerList.map(user => ({
        id: user.customerId,
        name: user.customerName
      }));
    })
  }
};

function addObdDelivery(){
    addObd(OrderId.value,time.value).then(res=>{
      alert(res.msg)
    })
}
const sysUser=ref({
  userId:''
})
const users = ref([]);
const fetchUsers =async (visible) =>{
  if(visible){
    getUser().then(res=>{
      users.value = res.sysUserList.map(user => ({
        id: user.userId,
        name: user.userName
      }));
    })
  }
};
//审核下拉框
const options = ref([
  {value:'',label: '请选择状态'},
  { value: 1, label: '通过' },
  { value: 2, label: '驳回' },
  { value: 3, label: '退货' },
  { value: 4, label: '部分退货' },
  { value: 5, label: '订单完成' },

]);
const searchOptions = ref([
  {value:'',label: '请选择状态'},
  {value: 0,label:'未审核'},
  { value: 1, label: '审核通过' },
  { value: 2, label: '被驳回' },

]);

// 处理下拉框值变化的事件
const handleSelectChange = (row) => {

  console.log(row.orderId,row.orderStatus)
  toExamine(row.orderId,row.orderStatus).then(res=>{
    handleSearch();
    alert(res.msg)
    console.log(res);
  })
}

//分页
const page = ref({
  total: 22,
  currentPage: 1,
  pageSize: 10,
})
function handleSizeChange(newSize) {
  page.value.pageSize = newSize;
  // fetchInventory();
  handleSearch();
}
function handleCurrentChange(newPage) {
  page.value.currentPage = newPage;
  // fetchInventory();
  handleSearch();
}
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
